<template>
  <div>
    <el-dialog
      title="配置"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="95px"
          :disabled="flag"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="分类名称" prop="groupName">
                <el-input
                  v-model="form.groupName"
                  placeholder="请输入分类名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用途描述" prop="objType">
                <el-input
                  v-model="form.objType"
                  placeholder="请输入用途描述"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="note">
                <el-input
                  v-model="form.note"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formpost" v-if="!flag"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {devevGroup,devGroupAdd,devGroupUpdateType } from "@/api/system/imei";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        groupId: "",
      },
      fileList : [],
      devices: [],
      cascaderProps: {
        value: "groupId",
        label: "groupName",
      },
      upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/system/manage/upload",
      },
      rules: {
        groupName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
      },
      flag: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    init(data, flag) {
      this.form = {}
      if (data.groupId) {
        this.form = data;

        this.flag = flag;
        this.fileList = [{ url:this.form.img}]
        console.log('sss',this.devices);
      }
      this.dialogVisible = true;
      devevGroup().then((res) => {
        this.devices = res.rows;
        console.log('laizd',this.devices);
      });
    },
    formpost() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (typeof this.form.groupId == "object") {
            this.form.groupId = this.form.groupId[0];
          }
          if (this.form.groupId) {
            devGroupUpdateType(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "更新成功",
                  type: "success",
                });
                this.dialogVisible = false
                this.$emit('shuax')
              }
            });
          } else {
            devGroupAdd(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.dialogVisible = false
                this.$emit('shuax')
              }
            });
          }
        }
      });
    },

    handlebefore(file) {
      console.log(file);
    },

    uploadChange(file, fileList) {
      console.log(123, fileList);
      this.form.img = fileList[0].response;
    },
  },
};
</script>